<template>
  <div class="element-type-list">
    <div class="tips">点击置入</div>
    <div class="el-type-item" @click="addElement('word')">
      <svg
        t="1690792128655"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3268"
        width="48"
        height="48"
      >
        <path
          d="M661.3 250.7H138.7c-41.2 0-74.7 33.4-74.7 74.7v560c0 41.2 33.4 74.7 74.7 74.7h522.7c41.2 0 74.7-33.4 74.7-74.7v-560c-0.1-41.3-33.5-74.7-74.8-74.7z m18.7 616c0 20.6-16.7 37.3-37.3 37.3H157.3c-20.6 0-37.3-16.7-37.3-37.3V344c0-20.6 16.7-37.3 37.3-37.3h485.3c20.6 0 37.3 16.7 37.3 37.3v522.7z"
          fill="#000000"
          p-id="3269"
        ></path>
        <path
          d="M596 624h-37.3c-15.4 0-28 12.6-28 28s12.6 28 28 28H596c15.4 0 28-12.6 28-28s-12.6-28-28-28zM596 530.7h-93.3c-15.4 0-28 12.6-28 28s12.6 28 28 28H596c15.4 0 28-12.6 28-28s-12.6-28-28-28zM596 437.3H465.3c-15.4 0-28 12.6-28 28s12.6 28 28 28H596c15.4 0 28-12.6 28-28s-12.6-28-28-28zM299 437.3l-123 336h77.7l24.7-77h122.1l25.2 77h78.1l-120.6-336H299zM294 641l44.3-145.8h2L383.6 641H294z"
          fill="#000000"
          p-id="3270"
        ></path>
        <path
          d="M885.3 64H418.7c-41.1 0-74.7 33.6-74.7 74.7v46.7c0 15.5 12.5 28 28 28s28-12.5 28-28v-28c0-20.5 16.8-37.3 37.3-37.3h429.3c20.5 0 37.3 16.8 37.3 37.3V680c0 20.5-16.8 37.3-37.3 37.3h-65.3c-15.5 0-28 12.5-28 28s12.5 28 28 28h84c41.1 0 74.7-33.6 74.7-74.7v-560c0-41-33.6-74.6-74.7-74.6z"
          fill="#000000"
          p-id="3271"
        ></path>
      </svg>
      <span>文本文字</span>
    </div>
    <div class="el-type-item" @click="addElement('barCode')">
      <svg
        t="1690792327414"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4291"
        width="48"
        height="48"
      >
        <path
          d="M910.613 200.188H1024V823.81H910.613zM540.613 200.188H654V823.81H540.613zM0 200.188h56.693V823.81H0zM84.173 200.188h28.347V823.81H84.173zM144.173 200.188h28.347V823.81h-28.347zM206.173 200.188h28.347V823.81h-28.347zM361.653 200.188H390V823.81h-28.347zM421.653 200.188H450V823.81h-28.347zM483.653 200.188H512V823.81h-28.347zM691.653 200.188H720V823.81h-28.347zM753.653 200.188H782V823.81h-28.347zM262 200.188h56.693V823.81H262zM814 200.188h56.693V823.81H814z"
          fill=""
          p-id="4292"
        ></path>
      </svg>
      <span>条形码</span>
    </div>
    <div class="el-type-item" @click="addElement('qrCode')">
      <svg
        t="1690792361130"
        class="icon"
        viewBox="0 0 1025 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5422"
        width="48"
        height="48"
      >
        <path
          d="M383.625366 79.921951v287.719025c0 8.791415-7.192976 15.98439-15.98439 15.98439H79.921951c-8.791415 0-15.98439-7.192976-15.98439-15.98439V79.921951c0-8.791415 7.192976-15.98439 15.98439-15.98439h287.719025c8.791415 0 15.98439 7.192976 15.98439 15.98439zM63.937561 0C28.672 0 0 28.672 0 63.937561v319.687805c0 35.265561 28.672 63.937561 63.937561 63.937561h319.687805c35.265561 0 63.937561-28.672 63.937561-63.937561V63.937561c0-35.265561-28.672-63.937561-63.937561-63.937561H63.937561z"
          p-id="5423"
        ></path>
        <path
          d="M255.750244 195.80878v55.945366c0 2.197854-1.798244 3.996098-3.996098 3.996098h-55.945366c-2.197854 0-3.996098-1.798244-3.996097-3.996098v-55.945366c0-2.197854 1.798244-3.996098 3.996097-3.996097h55.945366c2.197854 0 3.996098 1.798244 3.996098 3.996097z m-95.906342-67.933658c-17.682732 0-31.96878 14.286049-31.96878 31.96878v127.875122c0 17.682732 14.286049 31.96878 31.96878 31.968781h127.875122c17.682732 0 31.96878-14.286049 31.968781-31.968781V159.843902c0-17.682732-14.286049-31.96878-31.968781-31.96878H159.843902zM383.625366 655.36v287.719024c0 8.791415-7.192976 15.98439-15.98439 15.984391H79.921951c-8.791415 0-15.98439-7.192976-15.98439-15.984391V655.36c0-8.791415 7.192976-15.98439 15.98439-15.98439h287.719025c8.791415 0 15.98439 7.192976 15.98439 15.98439zM63.937561 575.438049c-35.265561 0-63.937561 28.672-63.937561 63.937561v319.687805c0 35.265561 28.672 63.937561 63.937561 63.937561h319.687805c35.265561 0 63.937561-28.672 63.937561-63.937561V639.37561c0-35.265561-28.672-63.937561-63.937561-63.937561H63.937561z"
          p-id="5424"
        ></path>
        <path
          d="M255.750244 771.246829v55.945366c0 2.197854-1.798244 3.996098-3.996098 3.996098h-55.945366c-2.197854 0-3.996098-1.798244-3.996097-3.996098v-55.945366c0-2.197854 1.798244-3.996098 3.996097-3.996097h55.945366c2.197854 0 3.996098 1.798244 3.996098 3.996097z m-95.906342-67.933658c-17.682732 0-31.96878 14.286049-31.96878 31.96878v127.875122c0 17.682732 14.286049 31.96878 31.96878 31.968781h127.875122c17.682732 0 31.96878-14.286049 31.968781-31.968781V735.281951c0-17.682732-14.286049-31.96878-31.968781-31.96878H159.843902zM959.063415 79.921951v287.719025c0 8.791415-7.192976 15.98439-15.984391 15.98439H655.36c-8.791415 0-15.98439-7.192976-15.98439-15.98439V79.921951c0-8.791415 7.192976-15.98439 15.98439-15.98439h287.719024c8.791415 0 15.98439 7.192976 15.984391 15.98439zM639.37561 0c-35.265561 0-63.937561 28.672-63.937561 63.937561v319.687805c0 35.265561 28.672 63.937561 63.937561 63.937561h319.687805c35.265561 0 63.937561-28.672 63.937561-63.937561V63.937561c0-35.265561-28.672-63.937561-63.937561-63.937561H639.37561z"
          p-id="5425"
        ></path>
        <path
          d="M831.188293 195.80878v55.945366c0 2.197854-1.798244 3.996098-3.996098 3.996098h-55.945366c-2.197854 0-3.996098-1.798244-3.996097-3.996098v-55.945366c0-2.197854 1.798244-3.996098 3.996097-3.996097h55.945366c2.197854 0 3.996098 1.798244 3.996098 3.996097z m-95.906342-67.933658c-17.682732 0-31.96878 14.286049-31.96878 31.96878v127.875122c0 17.682732 14.286049 31.96878 31.96878 31.968781h127.875122c17.682732 0 31.96878-14.286049 31.968781-31.968781V159.843902c0-17.682732-14.286049-31.96878-31.968781-31.96878H735.281951zM583.430244 1023.000976h47.953171c4.395707 0 7.992195-3.596488 7.992195-7.992196V838.181463c0-4.395707-3.596488-7.992195-7.992195-7.992195h-47.953171c-4.395707 0-7.992195 3.596488-7.992195 7.992195v176.827317c0 4.395707 3.596488 7.992195 7.992195 7.992196zM711.305366 1023.000976h47.953171c4.395707 0 7.992195-3.596488 7.992195-7.992196V903.118049c0-4.395707-3.596488-7.992195-7.992195-7.992195h-47.953171c-4.395707 0-7.992195 3.596488-7.992195 7.992195v111.890731c0 4.395707 3.596488 7.992195 7.992195 7.992196zM1024 959.063415v56.94439c0 4.395707-3.596488 7.992195-7.992195 7.992195H839.180488c-4.395707 0-7.992195-3.596488-7.992195-7.992195v-48.952195c0-4.395707 3.596488-7.992195 7.992195-7.992195h111.890732c4.395707 0 7.992195-3.596488 7.992195-7.992195v-47.953171c0-4.395707 3.596488-7.992195 7.992195-7.992195h47.95317c4.395707 0 7.992195 3.596488 7.992196 7.992195v55.945366h0.999024zM967.05561 799.219512h47.95317c4.395707 0 7.992195-3.596488 7.992196-7.992195V583.430244c0-4.395707-3.596488-7.992195-7.992196-7.992195h-47.95317c-4.395707 0-7.992195 3.596488-7.992195 7.992195v207.797073c0 4.395707 3.596488 7.992195 7.992195 7.992195zM575.438049 583.430244v47.953171c0 4.395707 3.596488 7.992195 7.992195 7.992195h176.827317c4.395707 0 7.992195-3.596488 7.992195-7.992195v-47.953171c0-4.395707-3.596488-7.992195-7.992195-7.992195H583.430244c-4.395707 0-7.992195 3.596488-7.992195 7.992195zM575.438049 711.305366v47.953171c0 4.395707 3.596488 7.992195 7.992195 7.992195h47.953171c4.395707 0 7.992195-3.596488 7.992195-7.992195v-47.953171c0-4.395707-3.596488-7.992195-7.992195-7.992195h-47.953171c-4.395707 0-7.992195 3.596488-7.992195 7.992195zM895.125854 775.242927v111.890732c0 4.395707-3.596488 7.992195-7.992195 7.992195h-47.953171c-4.395707 0-7.992195-3.596488-7.992195-7.992195v-47.953171c0-4.395707-3.596488-7.992195-7.992195-7.992195H711.305366c-4.395707 0-7.992195-3.596488-7.992195-7.992195v-47.953171c0-4.395707 3.596488-7.992195 7.992195-7.992195h175.828293c4.395707 0 7.992195 3.596488 7.992195 7.992195zM831.188293 583.430244v143.859512c0 4.395707 3.596488 7.992195 7.992195 7.992195h47.953171c4.395707 0 7.992195-3.596488 7.992195-7.992195V583.430244c0-4.395707-3.596488-7.992195-7.992195-7.992195h-47.953171c-4.395707 0-7.992195 3.596488-7.992195 7.992195z"
          p-id="5426"
        ></path>
      </svg>
      <span>二维码</span>
    </div>
    <div class="el-type-item" @click="addElement('business')">
      <svg
        t="1690792463798"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="10167"
        width="48"
        height="48"
      >
        <path
          d="M979.2 0H44.8a44.8 44.8 0 0 0-44.8 44.8v934.4a44.8 44.8 0 0 0 44.8 44.8h934.4a44.8 44.8 0 0 0 44.8-44.8V44.8a44.8 44.8 0 0 0-44.8-44.8zM960 960H64V64h896z"
          fill="#000"
          p-id="10168"
        ></path>
        <path
          d="M256 239.808h224v544.384H384v64h256v-64H544V239.808H768v134.72h64V175.808H192v198.72h64V239.808z"
          fill="#000"
          p-id="10169"
        ></path>
      </svg>
      <span>业务字段</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { elementFormSource } from './form'

const emits = defineEmits(['addElement'])
function addElement(type) {
  emits('addElement', elementFormSource(type))
}
</script>

<style lang="less" scoped>
.element-type-list {
  .tips {
    width: 100%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: #eee;
    color: #999;
    margin-bottom: 20px;
  }
  div.el-type-item {
    text-align: center;
    width: 100%;
    padding: 12px 0;
    margin-bottom: 12px;
    cursor: pointer;
    &:hover {
      background: #f2f2f2;
    }
    svg {
      display: block;
      width: 48px;
      margin: 0 auto 12px;
    }
    span {
      font-size: 16px;
      font-weight: 600;
    }
  }
}
</style>
